<template>
	<view class="mainpadding">
		<view class="flexleft xiahuaxian ">
			<view class="xiaohei sanshier  fonweight kuandu">联系人</view>
			<input type="text" placeholder="请填写联系人姓名" v-model="name">
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="xiaohei sanshier  fonweight kuandu">手机号</view>
			<input type="text" placeholder="请填写联系人手机号" v-model="mobile">
		</view>
		<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择住址" popup-title="请选择地区"
			v-model="address.county" class="zdy">
			<view class="flexbetween xiahuaxian margin_top">
				<view class="flexleft">
					<view class="xiaohei sanshier  fonweight kuandu">区域</view>
					<input class="" type="text" placeholder="请选择地区" v-model="area" disabled="">
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</uni-data-picker>
		<view class="gudingdb ffffff mainpadding">
			<view class="bigbtn" @click="addaddress">确定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				area: "",
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				name: "", //姓名
				mobile: "", //收货人电话
				value11: false,
				items: [],
			}
		},
		onLoad() {
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "0312",
						"text": "不限",
						"pid": "0304"
					})
				})
				item.children.unshift({
					"value": "0311",
					"text": "不限",
					"pid": "0304",
				})
			})
			// arr.unshift({
			// 	"value": "0310",
			// 	"text": "全国",
			// 	"pid": "0304",
			// })
			this.items = arr
		},
		methods: {
			isMobile(value) { //手机号校验
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			addaddress() { //添加地址
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let _this = this;
				let mobile = _this.mobile;
				if (_this.name == '') {
					uni.hideLoading()
					httpRequest.toast('请输入姓名');
					return false;
				}
				if (_this.mobile == "") {
					uni.hideLoading()
					httpRequest.toast('请输入手机号');
					return false;
				}
				if (_this.area == false) {
					uni.hideLoading()
					httpRequest.toast('请选择地址');
					return false;
				}
				let data = {
					username: _this.name,
					tel: _this.mobile,
					area_id: _this.address.county,
				}
				let url = "/api/user/addDlapply"
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			// bindPickerChange(val) {
			// 	let area = val.detail.value
			// 	let area_text = [area[0].text, area[1].text, area[2].text];
			// 	this.area = area_text.join("/")
			// 	this.address.province = area[0].value;
			// 	this.address.city = area[1].value;
			// 	this.address.county = area[2].value;
			// },
			bindPickerChange(val) {
				console.log(val);
				let area = val.detail.value
				if (area.length == 3) {
					if (area[2].value == "0312") {
						this.area = [area[0].text, area[1].text];
						this.address.county = area[1].value
					} else {
						this.area = [area[0].text, area[1].text, area[2].text];
						this.address.county = area[2].value;
					}
				} else if (area.length == 2) {
					this.area = [area[0].text];
					this.address.county = area[0].value;
				} else {
					this.area = ["全国"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zdy {
		font-size: 32rpx;
	}

	.kuandu {
		width: 130rpx;
	}
</style>